<template>
  <div class="serialize-view-nav">
    <div class="serialize-nav">
      <div
        v-for="(d,i) in dateTime"
        :key="d"
        class="date-container"
        :class='currentIndex==i?"active":""'
        @click="changeTab(i,d)"
      >
        <span class="
      year">{{d}}</span>
      </div>

    </div>
    <div class="icon">
      <i class="icon-search"></i>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tab: 0,
      dateTime: [],
      currentIndex: 0,
    };
  },
  created() {},
  mounted() {
    let date = new Date().getFullYear();
    let dateArr = [];
    for (var i = date; i >= date - 6; i--) {
      dateArr.push(i);
    }
    this.dateTime = dateArr;
    // console.log(this.dateTime);
  },
  methods: {
    // 改变Tab选项卡
    changeTab(index, year) {
      this.currentIndex = index;
      if (this.currentIndex == index) {
        // console.log(year);
        this.$emit("set-year", year);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.serialize-view-nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex-flow: row nowrap;
  // overflow-x: auto;
  padding: 0 10px ;
  width: 100vw;
  height: 50px;
  // border: 1px solid red;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
  z-index:9999;

  .serialize-nav {
    display: flex;
    margin-right: 35px;

    .date-container {
      // padding: 7px;
      // width: 100%;
      display: flex;
      margin-right: 5px;
      text-align: center;
      border-radius: 999px;
      font-size: 12px;
      background-color: #f3f3f3;
      cursor: pointer;
      .year {
        flex: 0 0 15vw;
        display: block;
        width: 15vw;
        padding: 5px 2px;
      }
    }
    .active {
      color: #fff;
      background-color: #363636;
    }
  }
  .icon {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #fff;

    .icon-search {
      display: block;
      width: 20px;
      height: 20px;
      background-image: url("../../assets/img/discover_icon_search.png");
      background-repeat: no-repeat;
      background-size: cover;
      // background-color: #fff;
      z-index: 100;
    }
  }
}
</style>
